<template>
	<view class="content">
		<image src="../../static/images/index/banner3.png" class="imageTop"></image>
		<view class="jbxx">
			<view class="item-banner">
				<view class="item-banner-line"></view>
				<view class="item-banner-text">基本信息</view>
				<image src="../../static/images/icon/Frame.png" class="item-banner-image"></image>
			</view>
			<view class="jbxx-item">
				<view class="jbxx-item-txt">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</view>
				<view class="jbxx-item-txt">芙蓉区</view>
			</view>

			<view class="jbxx-item">
				<view class="jbxx-item-txt">楼盘名称</view>
				<view class="jbxx-item-txt">融圣国际</view>
			</view>

			<view class="jbxx-item">
				<view class="jbxx-item-txt">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</view>
				<view class="jbxx-item-txt">150m²</view>
			</view>
		</view>
		<view class="geographical">
			<view class="item-banner">
				<view class="item-banner-line"></view>
				<view class="item-banner-text">地理位置</view>
			</view>
			<image src="../../static/images/index/position.png"></image>
		</view>
		<view class="anzs">
			<view class="item-banner">
				<view class="item-banner-line"></view>
				<view class="item-banner-text">案例展示</view>
			</view>
			<view class="anzs-item">
				<image class="anzs-item-image" src="../../static/images/index/Mask-group.png"></image>
				<view class="anzs-item-text">
					<view class="case-item-line"></view>
					30m²
					<view class="case-item-line"></view>
				</view>
			</view>
			<view class="anzs-item">
				<image class="anzs-item-image" src="../../static/images/index/Maskgroup.png"></image>
				<view class="anzs-item-text">
					<view class="case-item-line"></view>
					80m²
					<view class="case-item-line"></view>
				</view>
			</view>
			<view class="anzs-item">
				<image class="anzs-item-image" src="../../static/images/index/Mask-group.png"></image>
				<view class="anzs-item-text">
					<view class="case-item-line"></view>
					30m²
					<view class="case-item-line"></view>
				</view>
			</view>
			<view class="anzs-item">
				<image class="anzs-item-image" src="../../static/images/index/Maskgroup.png"></image>
				<view class="anzs-item-text">
					<view class="case-item-line"></view>
					80m²
					<view class="case-item-line"></view>
				</view>
			</view>
			<button class="appointment-button">确定预约</button>

			<view class="footer-banner">
				<view class="footer-banner-item">
					<image src="../../static/images/icon/home_select.png" class="footer-banner-item-image"></image>
					<text class="footer-banner-item-text">首页</text>
				</view>
				<view class="footer-banner-item">
					<image src="../../static/images/icon/time_unselect.png" class="footer-banner-item-image"></image>
					<text class="footer-banner-item-text">预约</text>
				</view>
				<view class="footer-banner-item">
					<image src="../../static/images/icon/me_unselect.png" class="footer-banner-item-image"></image>
					<text class="footer-banner-item-text">我的</text>
				</view>
			</view>
		</view>
	</view>
</template>

<style>
	* {
		margin: 0 auto;
		padding: 0 0;
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box; //盒子模型
	}

	.imageTop {
		width: 375px;
		height: 225px;
	}

	.item-banner {
		width: 375px;
		height: 28px;
		top: 14px;
		left: 5px;
		position: relative;
	}

	.item-banner-line {
		width: 6rpx;
		height: 28rpx;
		background: #3d9c36;
		position: absolute;
		left: 5%;
	}

	.case-item-line {
		display: inline-block;
		transform: translateY(-5px);
		width: 28rpx;
		height: 3rpx;
		background: #3d9c36;
		left: 5%;
		margin: 0 5px;
	}

	.item-banner-text {
		width: 56px;
		height: 20px;
		font-size: 14px;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: CENTER;
		color: #333333;
		line-height: 14px;
		position: absolute;
		left: 9%;
	}

	.item-banner-image {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10%;
		transform: translate(-10px, -3px);
	}

	.jbxx {
		position: relative;
	}

	.jbxx-item {
		width: 118px;
		transform: translate(-77%);
		margin-top: 10px;
	}

	.jbxx-item-txt {
		width: 56px;
		height: 17px;
		font-size: 14px;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		display: inline-block;
		text-align: left;
		color: #333333;
		line-height: 17px;
	}

	.jbxx-item-txt:nth-child(2) {
		font-weight: bold;
		transform: translateX(20px);
	}

	.geographical image {
		width: 335px;
		height: 203px;
		border-radius: 6px;
		transform: translate(20px, 10px);
	}

	.anzs {
		width: 100vw;
		flex-wrap: wrap;
		display: flex;
	}

	.anzs-item {
		width: 162px;
		height: 126px;
		margin-top: 10px;
	}

	.anzs-item-image {
		width: 162px;
		height: 100px;
	}

	.anzs-item-text {
		width: 162px;
		height: 25px;
		background: #ffffff;
		text-align: center;
		font-size: 14px;
		border-radius: 0px 0px 6px 6px;
		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.10);
	}

	.appointment-button {
		width: 164px;
		height: 40px;
		line-height: 40px;
		margin-top: 20px;
		margin-bottom: 20px;
		background: #3d9c36;
		color: #fff;
		border-radius: 4px;
		bottom: 0;
	}

	.footer-banner {
		width: 100vw;
		height: 56px;
		display: flex;
		border-top: 1px solid rgba(0, 0, 0, 0.10);
		overflow: hidden;
	}

	.footer-banner-item {
		width: 25px;
		transform: translateY(5px);
	}

	.footer-banner-item-image {
		width: 23px;
		height: 23px;
		z-index: 1;
	}

	.footer-banner-item-text {
		font-size: 12px;
	}
</style>
